<script setup lang="ts">
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";

import img1 from "@/assets/images/scene01.png";
import img2 from "@/assets/images/scene02.png";
import img3 from "@/assets/images/scene03.png";
import img4 from "@/assets/images/scene04.png";

const imgs = [
  {
    img: img1,
    title: "户外守护",
  },
  {
    img: img2,
    title: "亲情互动",
  },
  {
    img: img3,
    title: "停车守护",
  },
  {
    img: img4,
    title: "仓库守护",
  },

  // copy
  {
    img: img1,
    title: "户外守护",
  },
  {
    img: img2,
    title: "亲情互动",
  },
  {
    img: img3,
    title: "停车守护",
  },
  {
    img: img4,
    title: "仓库守护",
  },
];
</script>

<template>
  <!-- S 产品应用 -->
  <div class="my-12">
    <div class="text-center">
      <h3 class="text-2xl">产品应用</h3>
      <p class="mb-7.5 text-lg text-#808080">
        多种场景方案，个性化定制智能美好生活
      </p>
    </div>

    <!-- S PC模式 -->

    <ClientOnly>
      <Swiper
        loop
        centeredSlides
        :speed="500"
        :slidesPerView="1.5"
        :space-between="6"
        :loopPreventsSlide="true"
        :modules="[Autoplay]"
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
        class="scene-swiper"
      >
        <SwiperSlide v-for="(item, index) in imgs" :key="index">
          <div>
            <img :src="item.img" :alt="item.title" class="w-full rounded-xl" />
          </div>

          <p class="mt-2.5 text-center">{{ item.title }} ></p>
        </SwiperSlide>
      </Swiper>
    </ClientOnly>
  </div>
</template>

<style lang="less">
.scene-swiper {
  .swiper-slide {
    transform: scale(0.8);
    transition-duration: 200ms;

    &-active {
      transform: scale(1);
    }
  }
}
</style>
